From: Florian Müllner Date: Mon, 22 Aug 2022 23:29:10 +0000 (+0200) Subject: quickSettings: Split menu toggle X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~405^2^2~49 X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=cf89a6d01ef9e3ea8636fe9cfd6429e590008eed;p=gnome-shell.git quickSettings: Split menu toggle Menu toggles are currently regular toggles with an additional arrow button. This allows for a simpler implementation, but has downsides with regards to keyboard navigation and hover feedback. To make it more obvious that the two parts of the menu toggle perform different actions, change the overall structure of the toggle to *contain* a regular toggle and the menu button. That way each element uses its own hover effect, and shows up in the keynav focus chain. https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5964 Part-of: --- diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss index 494289d42..87028565e 100644 --- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss @@ -12,13 +12,15 @@ spacing-columns: $base_padding*2; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; min-height: 48px; border:none; +} +.quick-toggle { &:checked { @include button(default, $c:$selected_bg_color); } & > StBoxLayout { spacing: $base_padding*1.5; } @@ -37,16 +39,26 @@ font-size: 12px; } - .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } + .quick-toggle-icon { icon-size: $base_icon_size; } } .quick-menu-toggle { - &:ltr > StBoxLayout { padding-right: 0; } - &:rtl > StBoxLayout { padding-left: 0; } + & .quick-toggle { + min-width: auto; + max-width: auto; + + &:ltr { border-radius: 99px 0 0 99px; } + &:rtl { border-radius: 0 99px 99px 0; } + + &:ltr:last-child { border-radius: 99px; } + &:rtl:last-child { border-radius: 99px; } + } & .quick-toggle-arrow { - background-color: transparentize($fg_color, 0.9); padding: $base_padding $base_padding*1.75; + border: none; + + &:checked { @include button(default, $c:$selected_bg_color); } &:ltr { border-radius: 0 99px 99px 0; } &:rtl { border-radius: 99px 0 0 99px; } diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js index fd584e2b4..fe42e504f 100644 --- a/js/ui/quickSettings.js +++ b/js/ui/quickSettings.js @@ -10,6 +10,8 @@ const {PopupAnimation} = imports.ui.boxpointer; const DIM_BRIGHTNESS = -0.4; const POPUP_ANIMATION_TIME = 400; +const MENU_BUTTON_BRIGHTNESS = 0.1; + var QuickSettingsItem = GObject.registerClass({ Properties: { 'has-menu': GObject.ParamSpec.boolean( @@ -130,12 +132,22 @@ var QuickToggle = GObject.registerClass({ var QuickMenuToggle = GObject.registerClass({ Properties: { + 'title': GObject.ParamSpec.string('title', '', '', + GObject.ParamFlags.READWRITE, + null), + 'subtitle': GObject.ParamSpec.string('subtitle', '', '', + GObject.ParamFlags.READWRITE, + null), + 'icon-name': GObject.ParamSpec.override('icon-name', St.Button), + 'gicon': GObject.ParamSpec.object('gicon', '', '', + GObject.ParamFlags.READWRITE, + Gio.Icon), 'menu-enabled': GObject.ParamSpec.boolean( 'menu-enabled', '', '', GObject.ParamFlags.READWRITE, true), }, -}, class QuickMenuToggle extends QuickToggle { +}, class QuickMenuToggle extends QuickSettingsItem { _init(params) { super._init({ ...params, @@ -144,23 +156,59 @@ var QuickMenuToggle = GObject.registerClass({ this.add_style_class_name('quick-menu-toggle'); + this._box = new St.BoxLayout(); + this.set_child(this._box); + + const contents = new QuickToggle({ + x_expand: true, + }); + this._box.add_child(contents); + + // Use an effect to lighten the menu button a bit, so we don't + // have to define two full sets of button styles (normal/default) + // with slightly different colors + const menuHighlight = new Clutter.BrightnessContrastEffect(); + menuHighlight.set_brightness(MENU_BUTTON_BRIGHTNESS); + this._menuButton = new St.Button({ - child: new St.Icon({ - style_class: 'quick-toggle-arrow', - icon_name: 'go-next-symbolic', - }), + style_class: 'quick-toggle-arrow icon-button', + child: new St.Icon({icon_name: 'go-next-symbolic'}), + accessible_name: _('Open menu'), + effect: menuHighlight, + can_focus: true, x_expand: false, y_expand: true, }); this._box.add_child(this._menuButton); + this.bind_property('checked', + contents, 'checked', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('title', + contents, 'title', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('subtitle', + contents, 'subtitle', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('icon-name', + contents, 'icon-name', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('gicon', + contents, 'gicon', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('menu-enabled', this._menuButton, 'visible', GObject.BindingFlags.SYNC_CREATE); this.bind_property('reactive', this._menuButton, 'reactive', GObject.BindingFlags.SYNC_CREATE); + this.bind_property('checked', + this._menuButton, 'checked', + GObject.BindingFlags.SYNC_CREATE); this._menuButton.connect('clicked', () => this.menu.open()); + this._menuButton.connect('popup-menu', () => this.emit('popup-menu')); + contents.connect('popup-menu', () => this.emit('popup-menu')); this.connect('popup-menu', () => { if (this.menuEnabled) this.menu.open(); diff --git a/po/POTFILES.in b/po/POTFILES.in index ac35c70ea..5ceecebcb 100644 --- a/po/POTFILES.in +++ b/po/POTFILES.in @@ -48,6 +48,7 @@ js/ui/overview.js js/ui/padOsd.js js/ui/panel.js js/ui/popupMenu.js +js/ui/quickSettings.js js/ui/runDialog.js js/ui/screenShield.js js/ui/screenshot.js